<section class="record-box">
    <section class="header" i18n="ClassSchedule">Class Schedule</section>

    <section class="body flex flex-row">

        <div class="nav-col flex flex-column">
            <app-calendar [result]="result" [eventSource]="eventSource"></app-calendar>
        </div>

        <div class="message-col cal-list">
          <ng-scrollbar class="scrollbar">
            <section *ngIf="activedDay else error" class="">
                <ng-template [ngIf]="activedDay.bookedList" [ngIfElse]="loading">
                    <ng-template [ngIf]="activedDay.bookedList.length > 0" [ngIfElse]="error">
                        <div *ngFor="let booked of activedDay.bookedList" >
                            <app-booked [booked]="booked"></app-booked>
                        </div>
                    </ng-template>
                </ng-template>
            </section>

            <ng-template #error>
                <div style="height: 430px;" class="error"></div>
            </ng-template>

            <ng-template #loading>
                <div style="height: 430px;" class="loading"></div>
            </ng-template>
          </ng-scrollbar>
        </div>

    </section>

</section>
